<template>
  <div class="content-wraper">
    <div class="common-page">
      <div class="content-left">
        <div class="btns">
          <el-button type="primary" @click="showDirectory = true">文件夹编辑</el-button>
          <el-button type="primary" @click="delDir">文件夹删除</el-button>
        </div>
        <tree-box
          v-model="selectedNode"
          no-search
          :data="treeData"
          title="文档管理"
        />
      </div>
      <div class="content-right">
        <div class="btns">
          <el-button type="success" icon="el-icon-plus" @click="addDoc">新增</el-button>
        </div>
        <div class="detail">
          <!-- <manage-detail ref="modifyForm" :data="orgDetail" /> -->
          <com-table :data="docList" :columns="columns" :total="total" @pageChange="pageChange">
            <template v-slot:name="{row}">
              <a class="com-link" @click="viewDetail(row)">{{ row.name }}</a>
            </template>
            <template v-slot:type="{row: {type}}">
              {{ type ? docTypes[type - 1] : '' }}
            </template>
            <template v-slot:status="{row: {status}}">
              {{ status === 1 ? '未归档' : '已归档' }}
            </template>
            <template v-slot:options="{row}">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDoc(row)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="delDoc(row)">删除</el-button>
            </template>
          </com-table>
        </div>
      </div>
    </div>
    <dir-manage :show-modal.sync="showDirectory" :tree-data="treeData" @freshTree="getDocumentDirectoryTree" />
    <add-file :opt-type="optType" :data="docDetail" :dir="selectedNode" :show-modal.sync="showAddFileModal" @freshList="getDocList" />
  </div>
</template>

<script>
import {
  getMineDocumentDirectoryTree,
  deleteMineDocumentDirectory,
  getMineDocumentDetailList,
  deleteMineDocumentDetail
} from '@/api/knowledgeBase'
import dirManage from './components/myDirManage.vue'
import addFile from './components/addMyFile.vue'
export default {
  name: 'Manage',
  components: {
    dirManage,
    addFile
  },
  data() {
    return {
      docTypes: ['文档', '原件', '复印件', '扫描件'],
      docDetail: {},
      treeData: [],
      selectedNode: null,
      showDirectory: false,
      showAddFileModal: false,
      docList: [],
      fileList: [],
      optType: 'add',
      columns: [
        {
          label: '编号',
          prop: 'number'
        },
        {
          label: '标题',
          prop: 'name',
          slot: 'name'
        },
        {
          label: '文档类型',
          prop: 'type',
          slot: 'type'
        },
        {
          label: '文档状态',
          prop: 'status',
          slot: 'status'
        },
        {
          fixed: 'right',
          label: '操作',
          width: '180',
          prop: 'options',
          slot: 'options'
        }
      ],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  watch: {
    selectedNode(newValue) {
      // this.getDetail(newValue)
      this.getDocList()
    }
  },
  mounted() {
    this.getDocumentDirectoryTree()
  },
  methods: {
    pageChange(data) {
      this.pageParams = data
      this.getDocList()
    },
    getDocList() {
      const params = {
        mineDocumentDirectoryId: this.selectedNode.id,
        ...this.pageParams
      }
      getMineDocumentDetailList(params).then(res => {
        const { data, total } = res.data || {}
        if (data) {
          this.docList = data
          this.total = total - 0
        }
      })
    },
    getDocumentDirectoryTree() {
      getMineDocumentDirectoryTree().then(res => {
        const { nodes } = res.data || {}
        this.treeData = nodes || []
      })
    },
    delDir() {
      this.$confirm('确定要删除该文件夹吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id } = this.selectedNode
        deleteMineDocumentDirectory({
          mineDocumentDirectoryId: id
        }).then(res => {
          const { code, msg } = res
          if (code === '0001') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getDocumentDirectoryTree()
          } else {
            this.$message({
              type: 'error',
              message: msg || '删除失败!'
            })
          }
        })
      }).catch(() => {
      })
    },
    addDoc() {
      this.optType = 'add'
      this.showAddFileModal = true
    },
    editDoc(data) {
      this.optType = 'edit'
      this.docDetail = data
      this.showAddFileModal = true
    },
    viewDetail(data) {
      this.optType = 'detail'
      this.docDetail = data
      this.showAddFileModal = true
    },
    delDoc(data) {
      this.$confirm('确定要删除该文档吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id } = data
        deleteMineDocumentDetail({
          mineDocumentDetailId: id
        }).then(res => {
          const { code, msg } = res
          if (code === '0001') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getDocList()
          } else {
            this.$message({
              type: 'error',
              message: msg || '删除失败!'
            })
          }
        })
      }).catch(() => {
      })
    },
    modifyFile() {

    }
  }
}
</script>

<style lang="scss" scoped>
.com-link{
  color: #599cf8;
  &:hover {
    text-decoration:underline;
  }
}
.common-page{
  height:100%;
  display: flex;
  .content-left,.content-right{
    height: 100%;
  }
  .content-left{
    padding-right: 10px;
    border-right: 1px solid #dedede;
    width: 300px;
  }
  .content-right{
    padding-left: 10px;
    flex: 1;
    .detail{
      height: calc(100% - 40px);
      margin-top: 10px;
      overflow: auto;
    }
  }
  .tree{
    height: calc(100% - 40px);
    padding-top: 10px;
  }
}
</style>
